﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>加载MapGIS WMS服务地图</title>
    <!--导入外部样式表-->
    <link href="../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
    <!--必要的脚本引用-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="json" src="./static/libs/include-openlayers-local.js"></script>
    <style type="text/css">
      body,
      html,
      div,
      ul,
      li,
      iframe,
      p,
      img {
        border: none;
        padding: 0;
        margin: 0;
      }

      #mapCon {
        width: 100%;
        height: 95%;
        position: absolute;
      }

      #menu {
        text-align: center;
        width: 100%;
        height: 20px;
        padding: 5px 10px;
        font-size: 14px;
        font-family: '微软雅黑';
      }

      .checkbox {
        margin: 0px 10px;
      }
    </style>
  </head>

  <body>
    <div id="mapCon"></div>
    <script type="text/javascript">
      var wmsLayer = null //WMS地图图层
      //实例化Map对象加载地图
      var map = new ol.Map({
        target: 'mapCon',
        view: new ol.View({
            center: [116.397128, 39.916527],
            zoom: 3,
            projection: 'EPSG:4326'
        }),
      })

      var { protocol, ip, port } = window.webclient
      //实例化WMS图层对象（ol.layer.Image，ol.source.ImageWMS）
      wmsLayer = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          //WMS服务基地址
          url: `${protocol}://${ip}:${port}/igs/rest/ogc/doc/WorldJWVector/WMSServer`,
          //图层等参数
          params: {
            LAYERS: '世界政区',
            TILED: true,
          },
          //服务类型
          serverType: 'geoserver',
        }),
      })
      //添加WMS地图图层
      map.addLayer(wmsLayer)
    </script>
  </body>
</html>
